05 April 2016

1 Flux

1.1 组织结构

  • constant
    需要在各个模块中都使用的静态条目,比如操作的名称,状态的名称等
  • Component
    各种拿数据进行渲染的视图函数,最普通的ReactClass,相关DOM的清理
  • Action
    定义操作函数,引入并调用Dispatcher的方法触发操作任务
  • Dispatcher
    操作分发功能的定义模块,接收操作执行回调
  • Store
    数据的操作中心,使用Dispatcher监听并处理数据和状态的变更,
  • App
    渲染主应用,初始应用信息
  • Api
    各种获取和发送数据的操作,不多可以直接放Store

1.2 基本流程

  • 用户访问界面(View)
  • 用户操作View发出Action
  • Dispacher收到Action,调用Store回调进行相应的数据更新
  • Store更新数据后,触发View的change事件
  • View执行change操作,更新用户界面
  • 整体是View调用Action,Action调用Dispacher,Dispacher调用Store,Store更新View状态,View重新渲染

1.3 实现方式

  • View
    • 绑定操作,在操作中执行对应的Action
    • 注册事件,在Store触发改变的时候更新状态
  • Action
    • 调用Dispacher,执行对应的操作分发
  • Dispacher
    • 注册相应的操作分发操作
    • 调用Store的数据处理,并触发Store的更新行为
  • Store
    • 实现Event Emitter
    • 进行数据更新
    • 触发View的更新行为

2 Redux

2.1 实现方式

  • Action
    • 对应一个个的用户操作,及操作相关的数据
  • Store
    • 使用Reducer来处理各部分状态的变更,状态的变更只能在这里处理
    • 使用middleware来处理公共的操作,比如日志、统计等
    • 所有共享的数据都由state来传递
  • View
    • 根据状态变更

3 Redux 与 Flux的区别

  • Redux干掉了 Flux 中的Dispacher,功能揉到了Store里
  • Redux 单一的Store,Flux 多个Store
  • Redux 内层组件全部用props,state有最外层组件统一管理
  • Store包含所有state的管理,每一部分state由一个reducer来处理
  • 有一个根reducer来包装所有的细分reducer
  • Redux 简化了Flux

4 参考资料

4.1 入门理解

  1. 怎样理顺react,flux,redux这些概念的关系,开发中有必要使用它们吗?
  2. 怎样理顺react,flux,redux这些概念的关系,开发中有必要使用它们吗?
  3. 浅谈 React、Flux 与 Redux
  4. 浅谈 React、Flux 与 Redux
  5. 还在纠结 Flux 或 Relay,或许 Redux 更适合你
  6. 还在纠结 Flux 或 Relay,或许 Redux 更适合你
  7. 如何理解 Facebook 的 flux 应用架构?
  8. Flux用过了,Redux也用过了,还是觉得不顺手?要不要自己造一个?
  9. react 有哪些最佳实践?
  10. React中文
  11. React中文版
  12. React 官网
  13. Flux应用架构
  14. Flux架构入门
  15. 如何理解 Facebook 的 flux 应用架构?
  16. flux github
  17. Redux 介绍
  18. 玩物圈前端技术栈总结(React+Redux)
  19. redux官网
  20. Redux核心概念
  21. 深入浅出Redux
  22. 使用Redux管理你的React应用
  23. 谈一谈我对 React Flux 架构的理解
  24. Redux中文文档
  25. 深入理解React、Redux
  26. Redux管理你的React应用
  27. 解读Redux工作原理
  28. redux github
  29. react-redux github
  30. NB的React
  31. Redux从设计到源码